<script setup>
import { defineComponent } from "@vue/runtime-core";

const props = defineProps({
  width: {
    //列宽度
    type: String,
    default: "100%",
  },
  height: {
    //行高度
    type: String,
    default: "90%",
  },
  style: String,
  data: Array,
  headerdata: Object,
});
</script>

<template>
  <div class="table" :style="props.style">
    <div class="container">
      <table :width="props.width" :height="props.height">
        <thead>
          <tr>
            <th v-for:="value in props.headerdata">
              <div style="color: Navy">{{ value.label }}</div>
              <hr style="width: calc(100%+20px)" />
            </th>
          </tr>
        </thead>

        <tbody>
          <tr v-for:="row in props.data">
            <td v-for:="(value, key) in props.headerdata">
              <button>???{{ row[key] }}</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<style scoped>
.table {
  background-color: rgba(253, 253, 253, 1);
  position: absolute;
  overflow: hidden;
  z-index: -1;
}
.container {
  height: calc(100% + 20px);
  width: calc(100% + 20px);
  overflow-y: scroll;
  color: rgb(0, 0, 0);
}
button {
  border: none;
  background-color: rgba(0, 0, 0, 0.1);
  font: 500 20px "";
}
button:hover {
  filter: drop-shadow(0 0 2em #141414aa);
  background-color: rgba(169, 169, 169, 0.8);
}
</style>
